<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《送你一朵小红花》</title>

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="style.css">

</head>

<body class="bg-light" data-bs-spy="scroll" data-bs-target="#navbar1" data-bs-offset="200" tabindex="0">
    <!--导航栏-->
    <nav id="navbar1" class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">送你一朵 <img src="img/ani.gif" height="40"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav nav-pills mb-2 mb-lg-0 ms-auto" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="#carouselExampleCaptions">主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="index.jsp#story">剧情简介</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="index.jsp#people">演员职员</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="index.jsp#lines">戳心台词</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#d" id="navbarDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-person-circle" viewBox="0 0 16 16">
                                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
                                <path fill-rule="evenodd"
                                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
                            </svg>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown">
                            <%
                                if (session.getAttribute("username") != null) {
                                    out.println("<li><a class=\"dropdown-item\" href=\"./publish.jsp\">发表影评</a></li>\n" +
                                            "                            <li><a class=\"dropdown-item\" href=\"./read.jsp\">观看影评</a></li>\n" +
                                            "                            <li>\n" +
                                            "                                <hr class=\"dropdown-divider\">\n" +
                                            "                            </li>\n" +
                                            "                            <li><a class=\"dropdown-item\" href=\"./logout.jsp\">退出登陆</a></li>");

                                }
                                else {
                                    out.println("<li><a class=\"dropdown-item\" href=\"./register.jsp\">注册</a></li>\n" +
                                            "                            <li><a class=\"dropdown-item\" href=\"./login.jsp\">登陆</a></li>");
                                }
                            %>

                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!--图片轮播-->
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <ol class="carousel-indicators">
            <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
            <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
            <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/logo1.webp" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <%
                        String username = (String) session.getAttribute("username");
                        if (username != null) {
                            out.println("<h1 class=\"display-1\">欢迎" + username +"</h1>\n" +
                                    "                    <h5>你可以</h5>\n" +
                                    "<a href=\"publish.jsp\"><button type=\"button\" class=\"btn btn-primary btn-lg\">发表影评</button></a>\n" +
                                    "                    <a href=\"read.jsp\"><button type=\"button\" class=\"btn btn-outline-light btn-lg\">观看影评</button></a>");
                        }


                    %>

                </div>
            </div>
            <div class="carousel-item">
                <img src="img/slide6.png" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/slide3.png" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/slide4.jpeg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </a>
    </div>

    <!--剧情简介-->
    <div class="container my-5 py-5">
        <div class="row text-center my-5">
            <h1 class="display-4" id="story">剧情简介</h1>
            <hr class="w-25 mx-auto">
        </div>
        <div class="row my-5">
            <div class="col-sm-6 col-xs-12">
                <img src="img/logo2.webp" class="rounded mx-auto d-block img-fluid" alt="海报" id="story_image">
            </div>
            <div class="col-sm-6 col-xs-12 d-flex align-items-center justify-content-center">
                <p class="lead">两个抗癌家庭，两组生活轨迹。<br><br>影片讲述了一个温情的现实故事，思考和直面了每一个普通人都会面临的终极问题——想象死亡随时可能到来，我们唯一要做的就是爱和珍惜。
                </p>
            </div>
        </div>
    </div>

    <!--演员职员-->
    <div class="container-fluid my-5">
        <div class="row text-center">
            <div class="col-12">
                <h2 class="display-4" id="people">演员职员</h2>
                <hr class="w-25 mx-auto">
            </div>
        </div>
        <div class="row my-5 d-flex align-items-center justify-content-center">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/韩延.webp" class="card-img-top" alt=韩延>
                    <div class="card-body">
                        <h4 class="card-title">韩延</h4>
                        <p class="card-text">导演</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/李晗.webp" class="card-img-top" alt=李晗>
                    <div class="card-body">
                        <h4 class="card-title">李晗</h4>
                        <p class="card-text">编剧</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/赵英俊.webp" class="card-img-top" alt=赵英俊>
                    <div class="card-body">
                        <h4 class="card-title">赵英俊</h4>
                        <p class="card-text">片尾曲演唱</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/黄海.webp" class="card-img-top" alt=黄海>
                    <div class="card-body">
                        <h4 class="card-title">黄海</h4>
                        <p class="card-text">海报设计</p>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="row text-center my-5">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/易烊千玺.webp" class="card-img-top" alt=易烊千玺>
                    <div class="card-body">
                        <h4 class="card-title">易烊千玺</h4>
                        <p class="card-text">饰 韦一航</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/刘浩存.webp" class="card-img-top" alt=刘浩存>
                    <div class="card-body">
                        <h4 class="card-title">刘浩存</h4>
                        <p class="card-text">饰 马小远</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/朱媛媛.webp" class="card-img-top" alt=朱媛媛>
                    <div class="card-body">
                        <h4 class="card-title">朱媛媛</h4>
                        <p class="card-text">饰 陶慧</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/高亚麟.webp" class="card-img-top" alt=高亚麟>
                    <div class="card-body">
                        <h4 class="card-title">高亚麟</h4>
                        <p class="card-text">饰 韦江</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/夏雨.webp" class="card-img-top" alt=夏雨>
                    <div class="card-body">
                        <h4 class="card-title">夏雨</h4>
                        <p class="card-text">饰 老马</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/岳云鹏.webp" class="card-img-top" alt=岳云鹏>
                    <div class="card-body">
                        <h4 class="card-title">岳云鹏</h4>
                        <p class="card-text">饰 吴晓昧</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/陈祉希.webp" class="card-img-top" alt=陈祉希>
                    <div class="card-body">
                        <h4 class="card-title">陈祉希</h4>
                        <p class="card-text">演员</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/李晓川.webp" class="card-img-top" alt=李晓川>
                    <div class="card-body">
                        <h4 class="card-title">李晓川</h4>
                        <p class="card-text">饰 老吕</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/孔琳.webp" class="card-img-top" alt=孔琳>
                    <div class="card-body">
                        <h4 class="card-title">孔琳</h4>
                        <p class="card-text">饰 廖姐</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/吴晓亮.webp" class="card-img-top" alt=吴晓亮>
                    <div class="card-body">
                        <h4 class="card-title">吴晓亮</h4>
                        <p class="card-text">饰 吴亮</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/张绍刚.webp" class="card-img-top" alt=张绍刚>
                    <div class="card-body">
                        <h4 class="card-title">张绍刚</h4>
                        <p class="card-text">饰 张鹤松</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/孙强.webp" class="card-img-top" alt=孙强>
                    <div class="card-body">
                        <h4 class="card-title">孙强</h4>
                        <p class="card-text">饰 刘天仁</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/安笑歌.webp" class="card-img-top" alt=安笑歌>
                    <div class="card-body">
                        <h4 class="card-title">安笑歌</h4>
                        <p class="card-text">饰 庞子</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/李增辉.webp" class="card-img-top" alt=李增辉>
                    <div class="card-body">
                        <h4 class="card-title">李增辉</h4>
                        <p class="card-text">饰 大鸽子</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/姚未平.webp" class="card-img-top" alt=姚未平>
                    <div class="card-body">
                        <h4 class="card-title">姚未平</h4>
                        <p class="card-text">饰 老严</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/张浩天.webp" class="card-img-top" alt=张浩天>
                    <div class="card-body">
                        <h4 class="card-title">张浩天</h4>
                        <p class="card-text">饰 徐哥</p>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 g-5">
                <div class="card">
                    <img src="img/柴陆.webp" class="card-img-top" alt=柴陆>
                    <div class="card-body">
                        <h4 class="card-title">柴陆</h4>
                        <p class="card-text">饰 光子</p>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <!--戳心台词-->
    <div class="container my-5 py-5" id='heartbreaking'>
        <div class="row text-center my-5">
            <h1 class="display-4" id="lines">戳心台词</h1>
            <hr class="w-25 mx-auto">
        </div>
        <div class="row my-5">
            <div class="col-sm-4 col-xs-12">
                <img src="img/lines/1.png" alt="海报" class="img-fluid">
            </div>
            <div class="col-sm-8 col-xs-12 d-flex align-items-center justify-content-center">
                <blockquote class="blockquote">
                    <p>”我们珍惜每一刻，我们很少说话，但常常微笑。“</p>
                </blockquote>
            </div>
        </div>
        <div class="row my-5">
            <div class="col-sm-8 col-xs-12 d-flex align-items-center justify-content-center">
                <blockquote class="blockquote">
                    <p>”蓝天白云，定会如期而至。“</p>
                </blockquote>
            </div>
            <div class="col-sm-4 col-xs-12 d-flex align-items-center">
                <img src="img/lines/3.png" alt="海报" class="img-fluid">
            </div>

        </div>
        <div class="row my-5">
            <div class="col-sm-4 col-xs-12">
                <img src="img/lines/2.png" alt="海报" class="img-fluid">
            </div>
            <div class="col-sm-8 col-xs-12 d-flex align-items-center justify-content-center">
                <blockquote class="blockquote">
                    <p>“暗夜中寻光，荆棘中生长，时光的平仄里，有你梨涡浅笑，便觉温暖安然。”</p>
                </blockquote>
            </div>
        </div>
        <div class="row my-5">
            <div class="col-sm-8 col-xs-12 d-flex align-items-center justify-content-center">
                <blockquote class="blockquote">
                    <p>“你们这么不顾一切救我的命，只会让我觉得我是一个负担，我一点都不感激你们！”</p>
                </blockquote>
            </div>
            <div class="col-sm-4 col-xs-12">
                <img src="img/lines/4.png" alt="海报" class="img-fluid">
            </div>

        </div>

        <div class="row my-5">
            <div class="col-sm-4 col-xs-12">
                <img src="img/lines/6.png" alt="海报" class="img-fluid">
            </div>
            <div class="col-sm-8 col-xs-12 d-flex align-items-center justify-content-center">
                <blockquote class="blockquote">
                    <p>“那里从不落雪，也没有风，是亘古不变的地方。大家都过着自己理想的生活，简单而美好。”</p>
                </blockquote>
            </div>
        </div>
        <div class="row my-5">
            <div class="col-sm-8 col-xs-12 d-flex align-items-center justify-content-center">
                <blockquote class="blockquote">
                    <p>“我太想成为和你站在湖边的那个人了，可惜你的未来里没我” ​</p>
                </blockquote>
            </div>
            <div class="col-sm-4 col-xs-12">
                <img src="img/lines/9.png" alt="海报" class="img-fluid">
            </div>

        </div>

        <div class="row my-5">
            <div class="col-sm-4 col-xs-12">
                <img src="img/lines/8.png" alt="海报" class="img-fluid">
            </div>
            <div class="col-sm-8 col-xs-12 d-flex align-items-center justify-content-center">
                <blockquote class="blockquote">
                    <p>“你等着吧，今后呢，我要带你走遍全世界。”</p>
                </blockquote>
            </div>
        </div>
        <div class="row my-5">
            <div class="col-sm-8 col-xs-12 d-flex align-items-center justify-content-center">
                <blockquote class="blockquote">
                    <p>“那万一我们走散了怎么办？”</p>
                </blockquote>
            </div>
            <div class="col-sm-4 col-xs-12">
                <img src="img/lines/7.png" alt="海报" class="img-fluid">
            </div>

        </div>

        <div class="row my-5">
            <div class="col-sm-4 col-xs-12">
                <img src="img/lines/10.png" alt="海报" class="img-fluid">
            </div>
            <div class="col-sm-8 col-xs-12 d-flex align-items-center justify-content-center">
                <blockquote class="blockquote">
                    <p>“走散了呢，你就在人群里举起这个胳膊，我一看到这个小红花呢，我就马上跑过来找你。”</p>
                </blockquote>
            </div>
        </div>
    </div>

    <script src="js/popper.js"></script>
    <script src="js/bootstrap.js"></script>
</body>

</html>